<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/mobile/include/taglib.jsp"%>
<html>
<head>
	<title>商品列表</title>
	<%@include file="/WEB-INF/views/mobile/include/head.jsp" %>
	<script type="application/javascript" src="${ctxFront}/js/pmd-scroll.js"></script>
	<script type="application/javascript" src="${ctxFront}/js/cookie.js"></script>
	<style type="text/css">
		.p_ellipsis{ width: 70px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
		del{text-decoration:line-through}
	</style>
	<script type="text/javascript">
		var appId = '${appId}';
		var sid="${merchant.id}";
		var mobile="${mobile}";
		var classifyId = "${classifyId}";
		var choiceClassifyId = "${choiceClassifyId}";
		var shopModel = "${shopModel}";
		var products = new Array();
		var totalNumber = ${totalNumber};
		var totalAmount = ${totalAmount};
		var ctxFront = "${ctxFront}";
		var ctxShop = "${ctxShop}";
		var userType = "${userType}";//用户类型，0新用户
		$(document).ready(function() {
			//$(".ui-input-search").removeClass("ui-corner-all").css("position", "fixed").css("position", "_absolute").css("top", "0px").css("width", $(window).width()-40).css("margin","0px").css("box-shadow", "none").css("z-index", "1001");
			//$(".ui-input-search").hide();
			$.cookie("sid", sid);
			$.cookie("mobile", mobile);
			if(classifyId!=''){
				$.cookie("choiceClassifyId", sid+","+classifyId+","+choiceClassifyId);
			}else{
				$.cookie("choiceClassifyId", sid+","+choiceClassifyId);
			}
			$("#searchForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			//加载处理
			showPostion();
			//窗口大小改变事件
			window.onresize = function () {
				showPostion();
			}
			$(".poster").bind("click", function(){
				if(!$(".more-menu").is(":hidden")){
					$(".more-menu").slideToggle(500);
				}
				loading('正在跳转，请稍等...');
				setTimeout(function(){
					hideLoader();
					document.location="${ctxShop}/sysPoster?posterId=${merchant.activityPoster.id }&appId="+appId;				
				},1000);
			});
			
			$(".clause").bind("click", function(){
				if(!$(".more-menu").is(":hidden")){
					$(".more-menu").slideToggle(500);
				}
				loading('正在跳转，请稍等...');
				setTimeout(function(){
					hideLoader();
					document.location="${ctxShop}/sysClause?clauseId=${merchant.merchantClause.id }&appId="+appId;				
				},1000);
			});
			
			$(".phone").bind("click", function(){
				$(".more-menu").hide();
				//$("#phonePopup").popup("open");
				if($global_isAndroid){
					document.location="ievent://showAlert?fun=iEventPhoneAlert()";
				}else{
					document.location="tel:${merchant.merchantClause.phone }";
				}
			});
			
			$(".search").bind("click", function(){
				$(".more-menu").hide();
				iEeventSearch();
			});
			
			$("#listForm").bind("click", function(){
				if(!$(".more-menu").is(":hidden")){
					$(".more-menu").slideToggle(500);
				}
			});
			
			if(${fn:length(list)}>0){  //加载进来时封装商品信息
				products = new Array();
				<c:forEach items="${list}" var="product" varStatus="ps">
					var item = new Object();
					item.id="${product.id}";
					item.price=${product.price};
					item.startSaleNum=${product.startSaleNum}; //起购量
					item.purchaseNum=${product.purchaseNum};   //限购量
					item.cartId="${product.cartId}";	 //购物车里对应该商品编号
					item.number=${product.number};   //购物车里对应该商品购买数量
					item.amount=${product.amount};   //购物车里对应该商品购买金额
					products.push(item);
					//调用判断商品是否可以操作
					checkAddOrDiffIcon(item);
				</c:forEach>
			}
			$(".totalAmount strong").text("￥"+changeTwoDecimal_f(totalAmount));
		});
		
		var showPostion = function(){
			if(appId.length==0){
				$(".shop-left").css("top", "45px");
				$(".shop-left").height($(window).height()-95);
				$(".ui-content").css("padding-top", "0px");
			}else{
				$(".ui-page").css("padding-top","0px").css("padding-bottom","0px");
				$(".shop-left").css("top", "0px");
				$(".shop-left").height($(window).height()-50);
				$(".ui-content").css("padding-top", "0px");
			}
		}
		
		function showClassifyProducts(choiceId){
			if(choiceClassifyId != choiceId){ //如果当前选择的不是点击的分类,分类模块样式改变
				$(".classifyMenu li a").each(function(){
					if($(this).attr("id")==choiceId){
						$(this).css("background-color", "#fff").css("color", "#F7C709");
					}else{
						$(this).css("background-color", "#ededed").css("color", "#333");
					}
				});
			}else{
				return;
			}
			choiceClassifyId = choiceId; //设置当前选中分类
			if(classifyId!=''){
				$.cookie("choiceClassifyId", sid+","+classifyId+","+choiceClassifyId);
			}else{
				$.cookie("choiceClassifyId", sid+","+choiceClassifyId);
			}
			//异步获取分类下的商品列表
			var param = "sid="+sid+"&mobile="+mobile+"&classifyId="+choiceClassifyId+"&shopModel="+shopModel;
			loading('正在获取，请稍等...');
			//异步获取更多
			$.ajax({
				type: 'get',
				url: '${ctxShop}/classify/productList',
				data: param,
				dataType: 'json',
				success: function(data){
					hideLoader();
					products = new Array();
					if(data!=null && data.length>0){
						$("ul.custom-list li").remove();
						var list = data;
						for(var i=0; i<list.length; i++){
							var product = list[i];
							var url = "${ctxShop}/product/detail?id="+product.id;
							var html = '<li data-icon="false">';
							html += '<a id="'+product.id+'" data-transition="slide" href="#" style="background-color: #fff;">';
							html += '<div class="product-img" onclick="showProductDetail(\''+url+'\');">';
							html += '<img id="photo'+i+'" class="displayImages" src="${ctxFront }/images/loading.png" path="${ctxShop}/download?filePath='+product.logoUrl +'"/>';
						    html += '</div>';
						    html += '<h2 style="width: 58%;"><label class="float-left">'+product.name+'</label></h2>';
						    html += '<p style="width: 58%;"><label class="huise-color">'+product.assisTitle+'</label></p>';
						   	//html += '<p><label class="huise-color">'+(product.startSaleNum*product.productUnit.number)+product.productUnit.name+'起购</label></p>';
						    html += '<p style="width: 58%;"><label class="float-left amount"><strong>￥'+product.price +'</strong></label><label class="float-left unit-color">&nbsp;&nbsp;<del>￥'+product.originalPrice +'</del></label></p>';
					        html += '<p style="width: 58%;" class="choice-div">';
					        	html += '<img class="float-left diff" status="0" onclick="diffProductCart(\''+product.id+'\', 0)" alt="" src="${ctxFront }/images/shop/diff-1.png"/>';
					        	html += '<label class="float-left choice-num"><strong>'+product.number+'</strong></label>';
					        	html += '<img class="float-left add"  status="1" onclick="addProduct(\''+product.id+'\','+product.gift+')" alt="" src="${ctxFront }/images/shop/add-2.png"/>';
					        html += '</p>';
				    		html += '</a>';
			    			html += '</li>';
			    			$("ul.custom-list").append(html);
			    			
			    			//初始化products数组变量数据
			    			var item = new Object();
							item.id=product.id;
							item.price=product.price;
							item.startSaleNum=product.startSaleNum; //起购量
							item.purchaseNum=product.purchaseNum;   //限购量
							item.cartId=(typeof(product.cartId)=="undefined"?"":product.cartId);	 //购物车里对应该商品编号
							item.number=product.number;  //购物车里对应该商品购买数量
							item.amount=product.amount;   //购物车里对应该商品购买金额
							products.push(item);
							//调用判断商品是否可以操作
							checkAddOrDiffIcon(item);
						}
						$("ul.custom-list").listview('refresh'); // 刷新listview控件
						//预加载图片
						startLoadImage();
					}else if(data==null || data.length==0){
						$("ul.custom-list li").remove();
						var html = '<li data-icon="false" style="text-align: center;">';
						html += '暂无商品';
						html += '</li>';
						$("ul.custom-list").append(html);
						$("ul.custom-list").listview('refresh'); // 刷新listview控件
					}
					if($(".ui-header").css("display")=="none")
						$(".ui-page").css("padding-top","0px").css("padding-bottom","0px");
				},
				failure: function(data){
					hideLoader();
					alert(data);
				}				
			});
		}
		
		function showShoppingCart(){
			//验证是否登录
			if(!checkLogin()) return;
			
			loading('正在跳转，请稍等...');
			setTimeout(function(){
				hideLoader();
				document.location="${ctxShop}/shoppingcart?sid="+sid+"&mobile="+mobile+"&classifyId="+classifyId+"&shopModel="+shopModel+"&appId="+appId;				
			},1000);
		}
		function showProductDetail(url){
			loading('正在跳转，请稍等...');
			setTimeout(function(){
				hideLoader();
				document.location=url+"&sid="+sid+"&mobile="+mobile+"&classifyId="+classifyId+"&shopModel="+shopModel+"&appId="+appId;				
			},1000);
		}
		//增加商品
		function addProduct(id,gift){
			if(gift=="1" && userType=="1"){//商品是新用户礼包并且用户是老用户，则不允许添加
				openPopup("仅限新用户领取！");
				closePopup(3000);
				return;
			}
			addProductCart(id);
		}
	</script>
	<script type="text/javascript"> 
		$(document).ready(function() {
			//预加载图片
			startLoadImage();
		});
		function startLoadImage(){
			$(".displayImages").each(function(index){
				loadImage($(this).attr("id"),$(this).attr("path"),loadResult);
			});
		}
	</script>
	<script type="text/javascript"> 
		function iEventGetNavgitionInfo(){
			showPostion = function(){
				$(".ui-page").css("padding-top","0px").css("padding-bottom","0px");
				$(".shop-left").css("top", "0px");
				$(".shop-left").height($(window).height()-50);
				$(".ui-content").css("padding-top", "0px");
			}
			showPostion();
			var result = {
				titleView:1,
			    leftBtn:{ 
			    	type:0,	//0只显示返回,1只显示关闭，2显示返回，关闭
					backFun:"iEventGoBack()"   //返回执行的事件，不带的话由iOS控制。
				},
				rightBtn:{
					bottons:[
						//{
						//	type:0,			///0就是图片，1是文字,
						//	name:"webNavSearch.png",		//更多webNavMore.png 搜索webNavSearch.png
						//	fun:"iEventSearch()"
						//},
						{
							type:0,			///0就是图片，1是文字,
							name:"webNavMore.png",		//更多webNavMore.png 搜索webNavSearch.png
							fun:"iEventShowMore()"
						}
						//{
						//	type:1,			///0就是图片，1是文字,
						//	name:"联系客服",		//更多webNavMore.png 搜索webNavSearch.png
						//	fun:"iEventAppCustomService()"
						//}
					]
				}                
			};
			if($global_isAndroid){
				window.control.onJsComplete(JSON.stringify(result));
				return;
			}
			return JSON.stringify(result);
		}
		function iEventGoBack(){
			document.location="ievent://quitWebView";
		}
		function iEventShowMore(){
			showMoreMenu();
		}
		function iEventSearch(key){
			$("#searchParam").val(key);
			$("#searchForm").submit();
		}
		function iEventAppCustomService(){
			document.location="ievent://appCustomService";
		}
		function iEventPhoneAlert(){
			var result = {
				title:"拨打客服电话",
				message:"${merchant.merchantClause.phone }",
				buttons:[
					{
						title:"拨打",
						fun:"doTelephoneClick()"
					},
					{
						title:"取消",
						fun: "" //如果这里没给函数则直接执行提示层close关闭
					}	
				]		
			}
			if($global_isAndroid){
				window.control.showAlert(JSON.stringify(result));
				return;
			}
			return JSON.stringify(result);
		}
		function doTelephoneClick(){
			doTelephone('${merchant.merchantClause.phone}');
		}
	</script>
</head>
<body data-role="page">
	<div role="main" class="ui-content" style="padding:0px 0em 3.25em 0em;">
		<div id="popup" data-role="popup" data-position-to="window" data-overlay-theme="a" data-theme="b" class="ui-content">
		  <p></p>
		</div>
		<%@include file="/WEB-INF/views/mobile/layouts/checkLoginPopup.jsp" %>
		<form id="searchForm" method="post" action="${ctxShop }/search/list?sid=${merchant.id}&mobile=${mobile}&classifyId=${classifyId}&shopModel=${shopModel}&appId=${appId}" style="margin-bottom: 0em;">
		<%@include file="/WEB-INF/views/mobile/layouts/shopCommon.jsp" %>
		<input id="searchParam" name="searchParam" value="" type="hidden"/>
		<div class="shop-left">
			<!-- classifyPanel  -->
			<div data-position="left" data-display="push" data-theme="a" class="classifyPanel ui-panel-position-left ui-panel-display-push ui-body-a ui-panel-animate ui-panel-open"
				style="background-color: #ededed;">
		       	<ul data-role="listview" class="classifyMenu" style="width:100%; margin:0px;">
		        <c:if test="${fn:length(classifies) > 0}">
		        <c:forEach items="${classifies}" var="classify" varStatus="vs">
					<li data-icon="false">
						<a href="#" id="${classify.id}" onclick="showClassifyProducts('${classify.id}')" style="border-style:none; ${choiceClassifyId==classify.id?'background-color:#fff; color:#F7C709;':'background-color:#ededed' }">${classify.name }</a>
					</li>
		        </c:forEach>
		        </c:if>
				<c:if test="${fn:length(classifies) == 0}">
					<li data-icon="false">
					暂无分类.
					</li>
				</c:if>
				</ul>
			</div>
			<!-- /classifyPanel -->
		</div>
		<div class="shop-right custom-module">
			<ul data-role="listview" class="custom-list">
			<c:if test="${fn:length(list) != 0}">
			<c:forEach items="${list}" var="product" varStatus="ps">
				<li data-icon="false">
					<a id="${product.id }" data-transition="slide" href="#" style="background-color: #fff;">
						<div class="product-img" onclick="showProductDetail('${ctxShop}/product/detail?id=${product.id }');">
					    	<img id="photo${ps.index }" class="displayImages" src="${ctxFront }/images/loading.png" path="${ctxShop}/download?filePath=${product.logoUrl }"/>
					    </div>
					    <h2 style="width: 58%;"><label class="float-left">${product.name}</label></h2>
					    <p style="width: 58%;"><label class="huise-color">${product.assisTitle }</label></p>
					    <p style="width: 58%;"><label class="float-left amount"><strong>￥${product.price }</strong></label><label class="float-left unit-color">&nbsp;&nbsp;<del>￥${product.originalPrice}</del></label></p>
				        <p style="width: 58%;">
				        	<img class="float-left diff" status="0" onclick="diffProductCart('${product.id}', 0)" alt="" src="${ctxFront }/images/shop/diff-1.png"/>
				        	<label class="float-left choice-num"><strong>${product.number }</strong></label>
				        	<img class="float-left add" status="1" onclick="addProduct('${product.id}',${product.gift })" alt="" src="${ctxFront }/images/shop/add-2.png"/>
				        </p>
				    </a>
			    </li>
			</c:forEach>
			</c:if>
			<c:if test="${fn:length(list) == 0}">
				<li data-icon="false" style="text-align: center;">
				暂无商品.
				</li>
			</c:if>
			</ul>
		</div>
		</form>
	</div>
	<div data-role="footer" class="ui-footer" data-position="fixed" data-tap-toggle="false">
		<div class="float-left footer-left">
			<div class="a"><label class="float-left">总金额：</label><label class="float-left amount totalAmount"><strong>￥${totalAmount }</strong></label></div>
	    </div>
		<div class="float-right footer-right">
			<div class="b"><img alt="" src="${ctxFront }/images/shop/gwc_0.png" onclick="showShoppingCart()"></div>
			<div class="badger-css totalNumber-badger" style="${totalNumber==0?'display:none;':'' }" onclick="showShoppingCart()"><div class="badger-badge totalNumber" style="border-radius:50%">${totalNumber }</div></div>
	    </div>
	</div><!-- /footer -->
</body>
</html>
